$(function () {
       $('.form').each(function () {
           var distance = 10;
           var time = 250;
           var hideDelay = 500;

           var hideDelayTimer = null;

           var beingShown = false;
           var shown = false;
           var trigger = $('.trigger', this);
           var info = $('.popup', this).css('opacity', 0);


           $([trigger.get(0), info.get(0)]).mouseover(function () {
               if (hideDelayTimer) clearTimeout(hideDelayTimer);
               if (beingShown || shown) {
                   // don't trigger the animation again
                   return;
               } else {
                   // reset position of info box
                   beingShown = true;

                   info.css({
                       top: 0,
                       right: -33,
                       display: 'block'
                   }).animate({
                       top: '-=' + distance + 'px',
                       opacity: 1
                   }, time, 'swing', function() {
                       beingShown = false;
                       shown = true;
                   });
               }

               return false;
           }).mouseout(function () {
               if (hideDelayTimer) clearTimeout(hideDelayTimer);
               hideDelayTimer = setTimeout(function () {
                   hideDelayTimer = null;
                   info.animate({
                       top: '-=' + distance + 'px',
                       opacity: 0
                   }, time, 'swing', function () {
                       shown = false;
                       info.css('display', 'none');
                   });

               }, hideDelay);

               return false;
           });
       });
   });